
const baseUrl = 'http://api-breakingnews-web.itheima.net'

//1.------------获取文章分类/my/article/cates
axios.get(`${baseUrl}/my/article/cates`, {
    headers: {
        Authorization: localStorage.getItem('token')
    }
}).then(res => {
    const { data, status } = res.data
    if (status === 0) {
        data.forEach(obj => {
            //传id 判断是否为null
            let opt = $(` <option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`)
            $("select[name=cate_id]").append(opt)
        });
        //适合这个方法的有select checkbox radio 等 赋值给edit form表单
        form.render('select', 'edit')
    }
})

//2.---------------给表单注册事件
$('form').on('submit', e => {
    console.log(333);
    e.preventDefault()
    //需要传入数据 formdata格式
    let fd = new FormData($('form')[0])
    // 富文本获取 => 
    const htmlStr = tinyMCE.activeEditor.getContent();
    fd.set('content', htmlStr)
    //3.-----------差cover_img------------
    const canvas = cropper.getCroppedCanvas({
        width: 100,
        height: 100
    });

    canvas.toBlob(function(blobUrl){
        fd.append('cover_img',blobUrl)
        axios.post(`${baseUrl}/my/article/add`, fd, {
            headers: {
                Authorization: localStorage.getItem('token')
            }
        }).then(res => {
            // console.log(res);
            if(res.data.status ===0){
                location.href='./../list/list.html'
            }
        })
    })

    
})







// 选择图片
$('.select').on('click', () => {
    // // JS代码来主动触发input[type=file]的点击事件 - 选择文件的窗口就出来
    $("#file").click();
})
// 监听input的change事件
$("#file").on('change', e => {
    //拿到图片信息
    let file = e.target.files[0]
    let url = URL.createObjectURL(file);
    // console.log(url);
    // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
    cropper.replace(url); // 让cropper重新设置图片url地址以及重新构建cropper
})


// 2. 集成富文本编辑器
initEditor() // 初始化富文本
// 3. 集成图片裁剪的插件
let cropper;
function initCropper() {
    // 1. 集成裁剪插件
    const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
    cropper = new Cropper(image, {
        aspectRatio: 1, // 横纵比例
        preview: $(".img-preview")
    });
}
initCropper();

// publisher页面 - 文章标题
const form = layui.form;
form.verify({
    articleTitle: [
        /^[\u4E00-\u9FA5a-zA-Z0-9_-]+$/,
        "标题只能是中英文, 数字下划线中划线组成"
    ],
    // 分类判断
    cate: function () {
        return $("select[name=cate_id]").val().length == 0 && "请选择文章类别"
    }
})